import React, { Component, createContext } from 'react'
//创建上下文
const MyContext = createContext();
const { Provider, Consumer } = MyContext;
class A extends Component {
  state = {
    name: "xixi",
    age: 18
  }
  render() {
    const { name, age } = this.state
    return (
      <div className="parent">
        <h3>我是A组件</h3>
        <h4>当前用户名：{name}</h4>
        <Provider value={{ name, age }}>
          <B name={name} />
        </Provider>
      </div>
    )
  }
}
class B extends Component {
  render() {
    return (
      <div className="child">
        <h3>我是B组件</h3>
        <h4>接收到的用户名：</h4>
        <C />
      </div>
    )
  }
}
//第一种方式：仅适用类式组件
// class C extends Component {
//   //声明接收
//   static contextType = MyContext;
//   render() {
//     const { name, age } = this.context
//     return (
//       <div className="grand">
//         <h3>我是C组件</h3>
//         <h4>接收到的用户名：{`${name}--年龄:${age}`}</h4>
//       </div>
//     )
//   }
// }

//第二种方式：两种都适合
function C() {
  return (
    <div className="grand">
      <h3>我是C组件</h3>
      <h4>接收到的用户名：
      <Consumer>
          {
            value => `name是${value.name},年龄${value.age}`
          }
        </Consumer>
      </h4>
    </div>
  )
}



export default A